<template>
  <div class="E-login" :style="`background-image: url('${platform}');`">
    <span class="btn-close">
      <i @click="$emit('close',false)" class="el-icon-close" />
    </span>
    <E-box-login
      v-if="type==='login'"
      :tcp="tcp"
      @logined="logined"
      @binding="type==='binding-phone'"
      @openRegister="type='register'"
      @openReset="type='reset'"
    />
    <E-box-register
      :tcp="tcp"
      v-else-if="type==='register'"
      @logined="logined"
      @back="type='login'"
    />
    <E-box-reset :tcp="tcp" v-else-if="type==='reset'" @logined="logined" @back="type='login'" />
    <p class="wrap-tcp" style="margin:10px 0;">
      <el-checkbox style="margin-right:5px;" v-model="tcp">同意</el-checkbox>
      <el-link
        href="https://st.music.163.com/official-terms/service"
        target="_blank"
        :underline="false"
      >《服务条款》</el-link>
      <el-link
        href="https://st.music.163.com/official-terms/privacy"
        target="_blank"
        :underline="false"
      >《隐私政策》</el-link>
    </p>
  </div>
</template>

<script>
import platform from '@/assets/platform.png';
import { mapMutations } from 'vuex';

export default {
  components: {
    'E-box-login': () => import('./E-login/E-box-login'),
    'E-box-register': () => import('./E-login/E-box-register'),
    'E-box-reset': () => import('./E-login/E-box-reset')
  },
  data() {
    return {
      platform,
      tcp: false,
      type: 'login'
    };
  },
  methods: {
    async logined(userData) {
      if (!userData.profile) {
        // 需要初始化昵称
        const nickname = `new_${(+new Date()).toString(36)}`;
        const data = await this.$api.post('login_initName', { nickname });
        if (data.code !== 200) {
          this.$message({
            showClose: true,
            type: 'error',
            message: data.message
          });
          return;
        }
        this.$message({
          showClose: true,
          type: 'success',
          message: `已初始化昵称：${nickname}`
        });
        // eslint-disable-next-line no-param-reassign
        userData.profile = data.profile;
      }
      this.SET_user(userData);
      this.$emit('close', true);
    },
    ...mapMutations('user', ['SET_user'])
  }
};
</script>

<style lang="scss">
.E-login {
  position: relative;
  padding: 10px;
  background: rgb(250, 250, 250);
  width: 300px;
  border-radius: 5px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  padding-top: 150px;
  background-repeat: no-repeat;
  background-position: center 25px;
  & > .btn-close {
    position: absolute;
    top: 10px;
    right: 10px;
    & > i {
      color: #555;
      cursor: pointer;
      &:hover {
        color: #000;
      }
    }
  }
  & > .E-box-login,
  & > .E-box-register,
  & > .E-box-reset {
    width: 80%;
    margin: 0 auto;
  }
  & > .wrap-tcp {
    padding: 0 15px;
    font-size: 12px;
    & > .el-link {
      vertical-align: inherit;
    }
  }
}
</style>
